// import type { TableSetting } from "../types/table";
import { HeaderPropsType } from "../props";
import TableTitle from "./TableTitle";
import "../style/TableHeader.less";
import { Divider } from "antd";
import TableSettingComponent from "./settings/index";

interface ComponentProps {
	slots: SlotsComponent;
}

const TableHeader = (props: HeaderPropsType & ComponentProps) => {
	const prefixCls = "basic-table-header";
	const titleComponent = props.slots.tableTitle;
	const toolbarComponent = props.slots.toolbar;
	return (
		<div style={{ width: "100%" }} className="TableHeader">
			{/* slot-headerTop */}
			{props.slots?.headerTop && <div style={{ margin: "5px" }}>{props.slots?.headerTop}</div>}
			{/* title */}
			<div className="flex items-center">
				{/* slot-title */}
				{titleComponent ? titleComponent : props.title && <TableTitle helpMessage={props.titleHelpMessage} title={props.title} />}
				<div className={`${prefixCls}__toolbar`}>
					{toolbarComponent}
					{props.slots.toolbar && props.showTableSetting && <Divider type="vertical" />}
					{props.showTableSetting && <TableSettingComponent setting={props.tableSetting} />}
				</div>
			</div>
		</div>
	);
};

export default TableHeader;
